<template>
  <div class="play-page">
    <div
      class="page-image"
      :style="`background-image: url(${
        currentSong.song
          ? currentSong.picUrl
          : currentSong.al
          ? currentSong.al.picUrl
          : currentSong.artists[0].img1v1Url
      }?imageView=1&type=webp&thumbnail=247x0);`"
    ></div>
    <PlayPageHeader
      @hide-play-page="$emit('hide-play-page')"
      :currentSong="currentSong"
    />
    <PlayPageDisc
      :currentSong="currentSong"
      v-if="showDisc"
      :playing="playing"
      @click.native="showDisc = false"
    />
    <PlayPageLyric
      :currentTime="currentTime"
      :currentSong="currentSong"
      v-else
    />
    <PlayPageFooter
      :playing="playing"
      :currentTime="currentTime"
      :duration="duration"
      @update:currentTime="$emit('update:currentTime', $event)"
      @audio-play-handler="$emit('audio-play-handler')"
      @audio-pause-handler="$emit('audio-pause-handler')"
      @prev-song="$emit('prev-song')"
      @next-song="$emit('next-song')"
    />
  </div>
</template>

<script>
import PlayPageHeader from "./PlayPageHeader.vue";
import PlayPageDisc from "./PlayPageDisc.vue";
import PlayPageFooter from "./PlayPageFooter.vue";
import PlayPageLyric from "./PlayPageLyric.vue";
export default {
  components: { PlayPageHeader, PlayPageDisc, PlayPageFooter, PlayPageLyric },
  props: {
    currentSong: [Object, null],
    playing: Boolean,
    currentTime: Number,
    duration: Number,
    currentPlayList: Array,
  },
  data() {
    return {
      showDisc: true,
    };
  },
};
</script>

<style lang="less">
.play-page {
  width: 100vw;
  height: 100vh;
  background: rgb(168, 168, 168);
  padding: 15px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  .page-image {
    background-size: 250%;
    background-repeat: no-repeat;
    background-position: center center;
    filter: blur(50px) saturate(120%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .play-page-disc {
    flex: 1;
  }
  .play-page-luric {
    flex: 1;
  }
}
</style>